"use strict";
let _pageW = document.body.clientWidth; //舞台的宽度
let _pageH = document.body.clientHeight; //舞台的高度
let _sH = 0; //气球的高度
let _sW = 0; //气球的宽度
let _x = 10; //顶部的距离
let _y = 10; //左边的距离
let _t = 0; //定时器
let _l = 0; //随机数的长度
let _xm, _lm; //上下的随机数  左右的随机数
let _life = 0; //气球增长值  满100增加一个身体单元
let _move = 1; //气球的移动速度
let _scn = 0; //射击数
let _mt = 0, //气球顶边的距离
    _ml = 0; //气球左边的距离
let _w = parseInt(Math.random() * 200 / 3); //球的大小
let _i = 0; //小球的索引
let _snake = $(".snake0"); //气球移动的方向
$(function() {
    //初始化移动速度
    $("span.lifespeed").text(_move);
    //初始化rgb
    $("span.lifescolor").text(_scn);
    //点击设计气球
    $(document).on("click", ".ball", function(e) {
        _scn++;
        //_move += $(this).outerWidth() / 2;
        $(this).remove();
        //初始化移动速度
        //$("span.lifespeed").text(_move);
        //初始化rgb
        $("span.lifescolor").text(_scn);
    });
    console.log(_pageW.toString().length);
    console.log(_pageH.toString().length);





    //生成球
    ball(5000)
});



//循环生成球
function ball(time) {
    time = time ? time : 1000;
    console.log(time)
    ballFn();
    setInterval(() => {
        ballFn();
    }, time);
};
//生成球
function ballFn() {
    _w = parseInt(Math.random() * 200 / 3); //球的大小
    $("span.lifespeed").text(_w);
    _i++;

    switch (_pageW.toString().length) {
        case 1:
            _x = 10;
            break;
        case 2:
            _x = 100;
            break;
        case 3:
            _x = 1000;
            break;
        case 4:
            _x = 10000;
            break;
    };
    switch (_pageH.toString().length) {
        case 1:
            _y = 10;
            break;
        case 2:
            _y = 100;
            break;
        case 3:
            _y = 1000;
            break;
        case 4:
            _y = 10000;
            break;
    }
    do {
        _xm = Math.random();
        _t = parseInt(_xm * _y);
    }
    while (_t > _pageH - _w);

    do {
        _lm = Math.random();
        _l = parseInt(_lm * _x);
    }
    while (_l > _pageW - _w)

    //球初始话
    ballInit(_t, _l, _i, _w);
    if ($(".ball").length > parseInt(_pageW / 10)) {
        $(".ball").eq(0).remove();
    }
};




//生成球
function ballInit(t, l, i, _w) {
    let _r1 = parseInt(Math.random() * 10 / 5); //球的颜色
    let _r2 = parseInt(Math.random() * 10 / 5); //球的颜色
    let _r3 = parseInt(Math.random() * 10 / 5); //球的颜色
    let _g1 = parseInt(Math.random() * 10 / 2) + 1; //球的颜色
    let _g2 = parseInt(Math.random() * 10 / 2) + 1; //球的颜色
    let _g3 = parseInt(Math.random() * 10 / 2) + 1; //球的颜色
    let _b1 = parseInt(Math.random() * 10 / 2) + 1; //球的颜色
    let _b2 = parseInt(Math.random() * 10 / 2) + 1; //球的颜色
    let _b3 = parseInt(Math.random() * 10 / 2) + 1; //球的颜色
    $("body").append(`<div class="ball ball${i}" style="width: ${_w}px;
    height: ${_w}px;border-radius: ${_w}px;top:${t}px;left:${l}px;background: radial-gradient(closest-side at 50% 50%, #ffffff, rgb(${_r1}${_g1}${_b1},${_r2}${_g2}${_b2},${_r3}${_g3}${_b3}));"></div>`);
    speedFn($(`.ball${i}`), _w);
};

//速度
function speedFn(obj, size) {
    let speed = 0;
    let _top = 0;
    let maxT = _pageH - size;
    let maxL = _pageW - size;
    let t = setInterval(() => {

        speed += size / 1000; // 下落过程速度越来越大
        _top = obj.offset().top + speed;
        if (_top > maxT) {
            // console.log(_top)
            _top = maxT;
            speed *= -1; // 当碰到底边时 弹上来速度为负
            speed *= 1; // 模拟摩擦力
            if (maxT == obj.offset().top) {
                clearInterval(t);
            }
        } else {
            if (_top < 0) {
                _top = 0;
            }
        }

        //console.log(speed)
        obj.css("top", _top + "px");

    }, 10);
}